<template>
  <div class="create">
    <h1>新建文章</h1>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <div class="message">
        <el-form-item label="海报" prop="poster">
          <el-input v-model="ruleForm.poster" class="poster"></el-input>
        </el-form-item>
        <el-form-item label="发布者" prop="author">
          <el-input v-model="ruleForm.author" class="author"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择新闻类型">
            <el-option
              v-for="(item, index) of datatype"
              :key="index"
              :label="item.text"
              :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="活动形式" prop="detail" v-model="ruleForm.detail">
        <div
          ref="editor"
          style="text-align: left; z-index: 0; position: relative"
          @input="input($event)"
        ></div>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      round
      class="submit"
      @click="submitForm('ruleForm')"
      >确认新建</el-button
    >
  </div>
</template>

<script>
import E from "wangeditor";
var editor;
export default {
  name: "Create",
  data() {
    return {
      ruleForm: {
        title: "",
        description: "",
        poster: "",
        author: "",
        type: "",
        detail: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          {
            min: 3,
            max: 40,
            message: "长度在 3 到 40 个字符",
            trigger: "blur",
          },
        ],
        disc: [
          { required: true, message: "请作简要描述", trigger: "blur" },
          {
            min: 3,
            max: 25,
            message: "长度在 3 到 25 个字符",
            trigger: "blur",
          },
        ],
        poster: [
          { required: true, message: "请输入海报链接", trigger: "blur" },
          {
            pattern:
              /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/,
            message: "请输入正确链接",
            trigger: "blur",
          },
        ],
        author: [
          { required: true, message: "请输入作者", trigger: "blur" },
          {
            min: 1,
            max: 12,
            message: "长度在 1 到 12 个字符",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请输入新闻类型", trigger: "change" },
        ],
        content: [
          { required: true, message: "请填写活动形式", trigger: "blur" },
        ],
      },
      Title: "",
      Content: "",
      datatype: [],
    };
  },
  created() {
    fetch("http://120.27.209.174:1010/api/v1/posts_type")
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        this.datatype = res;
      });
  },
  mounted: function () {
    var That = this;
    editor = new E(this.$refs.editor);
    editor.config.uploadImgShowBase64 = true;
    editor.customConfig = {
      onchange: function (html) {
        That.Content = html;
      },
      uploadImgServer: "/api/UploadImg", // 上传图片到服务器
      uploadFileName: "Content", //后端使用这个字段获取图片信息
      uploadImgMaxLength: 1, // 限制一次最多上传 1 张图片
    };
    editor.create();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("仔细检查，小心出丑！", "提示", {
            confirmButtonText: "提交",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              fetch("http://120.27.209.174:1010/api/v1/posts", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(this.ruleForm),
                data: JSON.stringify(this.ruleForm),
              })
                .then((res) => res.json())
                .then((res) => {
                  console.log(res);
                  this.$router.push({
                    name: "Article",
                  });
                })
                .catch((err) => {
                  console.log(err);
                });
              this.$message({
                type: "success",
                message: "创建成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消创建",
              });
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //自定义事件，富文本编辑器数据双向绑定
    input(event) {
      this.ruleForm.detail = event.target.innerHTML;
      event.target.focus();
    },
  },
};
</script>
<style lang="less">
.create {
  text-align: left;
  font-size: 22px;
}
.create h1 {
  display: block;
  margin-left: 20px;
}
.poster {
  width: 400px;
}
.message {
  display: flex;
}
.submit {
  margin-left: 100px;
}
</style>
